<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/admin/notices'}">首页管理</el-breadcrumb-item>
      <el-breadcrumb-item>专业管理</el-breadcrumb-item>
      <el-breadcrumb-item>毕设时间列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card >
      <!--表格区域 stripe 创建带斑马纹的表格-->
      <el-table :data="deptList" stripe style="font-size: 15px;width:1000px;margin:0 100px">
        <el-table-column align="center" label="序号" width="100" type="index" ></el-table-column>
        <el-table-column align="center" label="专业代码" prop="id"> 
        </el-table-column>
        <el-table-column align="center" label="专业名称" prop="label" width="200" ></el-table-column>
        <el-table-column align="center" label="所属学院" prop="college" width="220" ></el-table-column>
        <el-table-column align="center" label="操作"> 
          <template slot-scope="scope" >
            <el-button type="success" icon="el-icon-edit" circle  @click="editDeptTime(scope.row.id)" ></el-button>
          </template>
        </el-table-column>
      </el-table>  
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage"
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>

    <!--修改专业信息的对话框-->
    <el-dialog title="毕设过程文件截止时间设置" :visible.sync="dialogVisible" width="600px">
      <span style="color:red;font-size:16px; font-weight:bold;margin: 0 150px">不填则表示该项不设置截止时间!</span>
      <!--主体内容区域-->
      <el-form :model="timeForm" label-width="200px" style="margin:20px 20px;">
        <el-form-item label="课题申请截止时间: ">
          <template>
            <el-date-picker vaule-format="yyyy-MM-dd HH:mm:ss" v-model="timeForm.subjectDeclare" type="date" placeholder="请输入课题申请截止时间"></el-date-picker>
          </template> 
        </el-form-item> 
        <el-form-item label="开题报告提交截止时间: ">
          <template>
            <el-date-picker vaule-format="yyyy-MM-dd HH:mm:ss" v-model="timeForm.openReport" type="date" placeholder="请输入开题报告提交截止时间"></el-date-picker>
          </template> 
        </el-form-item> 
        <el-form-item label="文献综述提交截止时间: ">
          <template>
            <el-date-picker vaule-format="yyyy-MM-dd HH:mm:ss" v-model="timeForm.literature" type="date" placeholder="请输入文献综述提交截止时间"></el-date-picker>
          </template> 
        </el-form-item> 
        <el-form-item label="毕业论文(初稿)提交截止时间: ">
          <template>
            <el-date-picker vaule-format="yyyy-MM-dd HH:mm:ss" v-model="timeForm.paperOriginal" type="date" placeholder="请输入毕业论文(初稿)提交截止时间"></el-date-picker>
          </template> 
        </el-form-item> 
        <el-form-item label="毕业论文(终稿)提交截止时间: ">
          <template>
            <el-date-picker v-model="timeForm.paperFinal" vaule-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="请输入毕业论文(终稿)提交截止时间"></el-date-picker>
          </template> 
        </el-form-item>   
      </el-form>
        <el-row style="margin-left:30%;margin-top:30px">
          <el-button round @click.native="dialogVisible = false">取 消</el-button> 
          <el-button round type="success" @click.native="submitTimeForm()" style="margin-left:10%">提交</el-button> 
        </el-row>
      <!--底部按钮区域--> 
    </el-dialog>
  </div>
</template>

<script>
  import {getAdminDeptByPage, getDeptTotal} from '../../axios/dept'  
  import {updateDeadline,getDeadlineByDeptId} from '../../axios/time'  
  export default {
    name: 'AdminTimeDeptList',
    data(){
      return {
        total: 0, // 专业总数 
        pageParam:{  currentPage: 1,   pageSize: 10  }, // 页码参数
        dialogVisible: false, // 添加/编辑 专业对话框的 显示/隐藏 
        deptList: [], // 专业列表 
        timeForm: { }, // 毕设时间设置表
        deptFormRules:{
          id: [ { required: true, message: '专业代码不能为空', trigger: 'blur' } ],
          label: [ { required: true, message: '专业名称不能为空', trigger: 'blur' } ],
          collegeId: [ { required: true, message: '所属学院不能为空', trigger: 'blur' } ]
        }
      }
    },
    created(){
      this.getDeptList() 
    },
    methods:{
      getDeptList(){
        // 向后端发送请求，获取所有专业信息列表
        getAdminDeptByPage(this.pageParam).then(res => {
          if(res.success) this.deptList = res.data  
        })
        getDeptTotal().then(res => {
          if(res.success) this.total = res.data  
        })
        // 无后端，模拟数据
        // this.deptList = [
        //   { id: 2, label: '计算机科学与技术', collegeId: '014301', college: '数学与计算机学院' },
        //   { id: '085400', label: '电子信息', collegeId: '014302', college: '信息工程学院' }
        // ]
      }, 
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getDeptList() 
      },  
      // 管理员编辑指定 id 的专业信息
      editDeptTime(deptId){ 
        // 向后端发送请求，获取指定专业id 的截止时间
        getDeadlineByDeptId(deptId).then(res => {
          if(res.success){
            this.timeForm = res.data; 
            this.dialogVisible = true  
          } 
        }) 
      }, 
      submitTimeForm(){   
        this.$confirm('确认提交吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => { 
          updateDeadline(this.timeForm).then(res => {
            if(res.success){
              this.$message.success('修改截止时间成功!')
              this.dialogVisible = false 
              this.getDeptList()
            }   
          }) 
        }).catch(() => {  
          this.$message.info('已取消提交!');   
        })  
      },
    }
  }
</script>

<style scoped>
  .el-form-item .el-input{
    width: 90%;
  }
</style>